<template>
	<view class="page business-search">
		<nav-header title="企业内搜索" :show-right="false">
		</nav-header>

		<view class="search-bar">
			<uni-search-bar class="uni-mt-10 search-input" radius="100" bgColor="#fff" placeholder="请输入"
				clearButton="none" cancelButton="none" @confirm="search" />
			<button type="primary" size="small">搜索</button>
		</view>
		<view class="search-tip">
			<text class="text-xs-Regular">*当前为企业内搜索，如需添加好友或加入群聊，请在首页操作</text>
		</view>

		<view>
			<fui-segmented-control :values="values" color="#181D27" activeColor="#2970FF" type="text" height="80"
				size="32" @click="itemClick"></fui-segmented-control>
		</view>
		<view class="search-content">
			<view>
				<view class="content">
					<view v-show="current === 0">
						同事的内容
					</view>
					<view v-show="current === 1">
						群聊的内容
					</view>
					<view v-show="current === 2">
						聊天记录的内容
					</view>
					<view v-show="current === 3">
						系统消息的内容
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import fuiSegmentedControl from "@/components/fui-segmented-control/fui-segmented-control.vue"
	export default {
		data() {
			return {
				values: ['同事', '群聊', '聊天记录', '系统消息'],
				current: 0
			}
		},
		methods: {
			search() {

			},
			itemClick(e) {
				this.current = e.index
			},
		}
	}
</script>

<style lang="scss" scoped>
	.business-search {
		.search-bar {
			display: flex;
			align-items: center;
			padding: 20rpx 30rpx;

			.uni-searchbar {
				padding: 0;
				border: 1rpx solid #cccccc;
				height: 76rpx;
				border-top-left-radius: 20rpx;
				border-bottom-left-radius: 20rpx;
			}

			.search-input {
				flex: 1;
			}

			button {
				width: 140rpx;
				height: 80rpx;
				font-size: 30rpx;
				border-top-left-radius: 0rpx;
				border-bottom-left-radius: 0rpx;
				border-top-right-radius: 20rpx;
				border-bottom-right-radius: 20rpx;
				background-color: #007aff;
			}
		}

		.search-tip {
			padding: 0 30rpx 16rpx 30rpx;
			color: $warning-500;
			font-size: 25rpx;
		}

		.search-content {
			padding: 20rpx 30rpx;

			.content {
				padding: 20rpx 0;
			}
		}
	}
</style>